import react from "react";
import Items from "./items/Items"
import Count from "./count/Count"
import Header from "./header/Header";


import "./loadNote.css"

class LoadNote extends react.Component{
    state = {
        todos : [
            {id:"001", name: "吃饭", done: true},
            {id:"002", name: "睡觉", done: true},
            {id:"003", name: "写代码", done: false}
        ]
    }

    addTodo = (todoObj)=>{
        const {todos} = this.state;
        const newTodos = [todoObj,...todos];
        this.setState({todos:newTodos});
    }

    updateTodo = (id,done)=>{
        const {todos} = this.state;
        const newTodos =  todos.map((todo)=>{
            if(todo.id === id){
                return {...todo, done: done}
            }else{
                return todo
            }
        })
        this.setState({todos: newTodos});
    }

    checkAllTodo = (done)=>{
        const {todos} = this.state;
        const newTodos = todos.map((todo)=>{
            return {...todo, done: done};
        })
        console.log(todos);
        console.log(newTodos);
        this.setState({todos:newTodos});
    }


    deleteTodo = (id)=>{
        const {todos} = this.state;
        const newTodos = todos.filter((todo)=>{
            return todo.id !== id;
        })
        this.setState({ todos: newTodos });
    }

    deleteDowns = ()=>{
        const {todos} = this.state;
        const newTodos = todos.filter((todo)=>{
            return !todo.done;
        })
        this.setState({ todos: newTodos });
    }

    render(){
        const {todos} = this.state;
        return (
            <div className="loadNote">
                <Header addTodo = {this.addTodo}></Header>
                <Items todos = {todos} updateTodo = {this.updateTodo} deleteTodo = {this.deleteTodo}></Items>
                <Count todos = {todos} checkAllTodo={this.checkAllTodo} deleteDowns={this.deleteDowns}></Count>
            </div>
        )
    }
} 

export default LoadNote;